<template>
<div class="content">
    <mt-header fixed title="下属单位">
        <div slot="left">
            <mt-button icon="back" @click.native="goback()">返回</mt-button>
        </div>
    </mt-header>
      <mt-loadmore  :bottom-method="loadBottom" :autoFill="autoFill" :bottom-all-loaded="allLoaded" ref="loadmore">
      <mt-cell v-for="(item) in supperlist" :key="item.supervisorid">
        <div slot="title" class="title" @click="goSupperDetails(item.supervisorid)">
          <div class="desc">
             <div class="name">{{item.name}}</div>
             <div class="notes">{{item.address}}</div>
          </div>
        </div>
        <div slot="icon" class="title-img" v-show="item.imageurl">
          <img :src="item.imageurl"/>
        </div>
      </mt-cell>
    </mt-loadmore>
    <not-data-page v-if="!supperlist.length"></not-data-page>
    </div>
</template>
<script>
import notDataPage from '@/component/notQueryDataPage.vue'
export default {
  data () {
    return {
      supperlist: [],
      page: 1,
      pagesize: 10,
      autoFill: false,
      allLoaded: false

    }
  },
  components: {
    notDataPage
  },
  created () {
    this.mysuperiors(0)
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    async mysuperiors (type) {
      const parm = {
        page: this.page,
        pagesize: 10
      }
      const res = await this.$store.dispatch('mysuperiors', parm)
      if (res.status === '0') {
        this.pagesize = res.context ? res.context.supperlist.length : 0
        type ? this.supperlist = [...this.supperlist, ...res.context.supperlist] : this.supperlist = [...res.context.supperlist]
      }
    },
    async loadBottom () {
      this.$refs.loadmore.onBottomLoaded()
      if (this.pagesize < 10) {
        this.allLoaded = true
        return
      }
      this.page++
      await this.mysuperiors(1)
    },
    goSupperDetails (supervisorid) {
      this.$router.push({
        path: '/company', query: {supervisorid}
      })
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  padding-top: 40px;
.mint-popup-bottom{
  width: 100%;
}
.mint-cell-title{
  height: 80px;
  .title{
    display: inline-block;
    margin: 10px 0 10px 10px;
 .desc{
   height: 60px;
   width: 200px;
   div{
    word-break: keep-all;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 30px;
    line-height: 30px;
   }
   .notes{
    color: #ccc;
  }
 }
}
}
.title-img{
  display: inline-block;
  margin: 10px 0;
  width: 60px;
  height: 60px;
  line-height: 60px;
  float: left;
  img{
    width: 100%;
    border-radius: 6px;
  }
}

}
</style>
